
import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { NavBar, Button, Modal } from 'antd-mobile';
import SingleImagePicker from '../components/SingleImagePicker';
import styles from './UploadDoctorImagePage.css';

const alert = Modal.alert;

const imagePickerStyle = {
  position: 'relative',
  width: 270,
  height: 202,
  border: '1px solid #000',
};
const smallImagePickerStyle = {
  height: 190,
  width: 190,
};

const imageStyle = {
  margin: 0,
  padding: 0,
  height: 202,
  display: 'block',
  width: '100%',
  position: 'relative',
};

const fileStyle = {
  height: 202,
  width: 270,
  position: 'absolute',
  left: '0',
  top: '0',
  bottom: '0',
  right: '0',
  margin: 'auto',
};

function UploadDoctorLicImage({ doctorImage, dispatch }) {
  const { uploadToken, buttonStatus } = doctorImage;
  function uploadImageSuccess(res) {
    const imageUrl = `http://memberdata.jiukangguoji.cn/${res.key}`;
    // dispatch action to set state
    dispatch({
      type: 'doctorImage/uploadImageSuccess',
      payload: imageUrl,
    });
  }
  function onSubmitImage() {
    dispatch({
      type: 'doctorImage/submitImage',
    });
  }
  function onRightClick() {
    alert('', '您的医师信息尚未完善，本次认证跳过后请移步应用商店下载9K医生App,在App端完成医师认证并领取认证奖励', [
    { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
    { text: '跳过,在App认证', onPress: () => dispatch(routerRedux.push('/uploadDoctorLic')), style: { fontWeight: 'bold' } },
    ]);
  }
  return (
    <div className={styles.normal}>
      <NavBar
        leftContent="医师信息" rightContent={<span onClick={onRightClick} >跳过，稍后认证</span>} mode="light" onLeftClick={() => dispatch(routerRedux.push('/physicianAuth'))}
      />
      <div className={styles.title}>上传医师头像</div>
      <div className={styles.attention}>免冠正面，以工作证头像为佳</div>
      <SingleImagePicker accept="image/*" uploadToken={uploadToken} keyPrefix="doctor/head" style={imagePickerStyle} imageStyle={imageStyle} fileStyle={fileStyle} className={styles.sip} maxSize="5M" onComplete={uploadImageSuccess} />
      <div className={styles.example}>
        <div className={styles.attention}>示例</div>
        <div className={styles.sdiv}>
          <img src="images/doctorhead.png" alt="" style={smallImagePickerStyle} className={styles.ssip} />
        </div>
      </div>
      <div className={styles.subbtn}>
        <Button className="btn" disabled={buttonStatus} type="primary" onClick={onSubmitImage}>下一步，上传医师执业证书</Button>
      </div>
    </div>
  );
}

function mapStateToProps({ doctorImage }) {
  return { doctorImage };
}

export default connect(mapStateToProps)(UploadDoctorLicImage);
